<!-- 当日番茄钟 -->
<template>
    <div class='todayPlan'>
        <!-- 当前时间 -->
        <div class="cur_day_time">
            <div class="cur_day_time_txt">
                {{ curTime }}
            </div>
            <!-- 添加新任务 -->
            <div class="add_work" @click="openaddTask(true)">
                <svg class="svg-icon" aria-hidden="true">
                    <use :xlink:href="'#' + svgIcon[0]"></use>
                </svg>
            </div>
        </div>

        <!-- 任务列表 -->
        <div class="task_list">
            <div class="task_card" v-for="(item, index) in taskList" :key="item.name + index" 
            :style="{ background: 'url(' + itemImg(item.bgSrc) +') no-repeat center center'}">
                <!-- 删除任务 -->
                <div class="task_card_close" @click="deleteTask(item.taskId)" title="删除任务">
                    <svg class="svg-icon task_card_close_icon" aria-hidden="true">
                        <use :xlink:href="'#' + svgIcon[2]"></use>
                    </svg>
                </div>
                <div class="task_card_left">
                    <div class="nameDom">
                        {{ item.name }}
                    </div>
                    <div class="duringDom">
                        {{ item.duringTime }} 分钟
                    </div>
                </div>
                <div class="task_card_right">
                    <div class="start" @click="taskStart(item)">
                        开始
                    </div>
                </div>
            </div>

            <div class="occDom" v-show="taskList.length == 0">
                <div class="occDom_img"></div>
                <div class="occDom_txt">
                    当前你没有时间任务，快去添加
                </div>
            </div>
        </div>

        <!-- 添加待办 -->
        <div class="absTip" v-show="absTipFlag">
            <div class="add_need_task" >
                <div class="need_head">
                    <div class="ntitle"> 添加待办 </div>
                    <div class="nclose">
                        <svg class="svg-icon" aria-hidden="true" @click="openaddTask(false)">
                            <use :xlink:href="'#' + svgIcon[1]"></use>
                        </svg>
                    </div>
                </div>
                <div class="need_content">
                    <wzc_input class="need_task_name" placeholder="请输入事件名称"
                    v-model="needTaskname" />

                    <div class="timeIntro">
                        设置时间：{{ sliderValue }} 分钟
                    </div>
                    <wzc_slider 
                        class="need_task_slider"
                        :value.sync="sliderValue"
                        :backgroundcolor="'#2295cf'"
                        :width="240"
                    >
                    </wzc_slider>

                    <div class="surebtn" @click="addNewTask">
                        确定
                    </div>
                </div>
            </div>
        </div>
        <!-- 任务倒计时 -->
        <div class="absTip" v-show="isRuning">
            <div class="countdown">
                <div class="countdown_title">
                    倒计时
                </div>
                <div class="countdown_time">
                    剩余{{ countdownTime }}
                </div>
                <!-- 结束倒计时 -->
                <div class="countdown_close" @click="overCountdown()" title="提前结束">
                    <svg class="svg-icon task_card_close_icon" aria-hidden="true">
                        <use :xlink:href="'#' + svgIcon[2]"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import wzc_input from "../input/wzc_input.vue";
import wzc_slider from '../Slider/wzc-slider.vue'

let ten = (n)=>{
    if (n < 10) {
        return '0' + n;
    } else {
        return n;
    }
}

export default {
    name: 'todayPlan',
    props: {},
    data () {
        return {
            svgIcon: ['icon-addition', 'icon-chahao', 'icon-closefill'],
            curTime: '2020年',
            date: {
                hour: 0,
                minute: 0,
                second: 0,
                year: '',
                mounth:'',
                date:'',
                day: ''
            },
            taskList: [
                {
                    name: '学习node',
                    creatTime: '',
                    duringTime: 10,
                    startFlag: false,
                    bgSrc: 'bg1.png',
                    taskId: 'adfa455a'
                },
            ],
            needTaskname: '',
            sliderValue: 20,
            absTipFlag: false,   // 添加任务弹窗
            isRuning: false,  // 是否有任务正在进行中
            countdownTime: '',  //任务倒计时
            taskbeginTime: '',  // 任务开始时间
            taskendTime: '',   // 任务结束时间
            taskduringTime: 0,
            curTask: null,
            hasProcessTime: 0,  // 任务真正耗时
        };
    },
    watch:{
        taskduringTime: function(val) {
            this.countdownTime = ` ${ten(parseInt(this.taskduringTime/3600))}小时
                                        ${ten(parseInt(this.taskduringTime%3600/60))}分
                                        ${ten(parseInt(this.taskduringTime%3600%60))}秒`;
            if (val == 0) {
                this.notification();
                this.isRuning = false;
                this.countdownTime = '';  //任务倒计时
                this.taskbeginTime = '';  // 任务开始时间
                this.taskendTime = '';
            }
        }
    },
    mounted() {
        this.currentTime();
        setInterval(()=>{
            this.currentTime();
            this.curTime = `${this.date.year}年${this.date.mounth}月${this.date.date}日 ${this.date.hour}:${this.date.minute}:${this.date.second}`;

            if (this.isRuning && this.taskduringTime > 0) {
                this.hasProcessTime++;
                this.taskduringTime--;
            }
        }, 1000 )
        this.initGetTomato();

        // window.ipcRenderer.on('save-return', (event, arg) => {
        //     console.log(arg)
        // })

        // 监听主进程 番茄钟任务
        window.ipcRenderer.on('tomato-list', (event, arg) => {
            try {
                this.taskList = JSON.parse(arg);
            } catch(e) {
                this.taskList = [];
            }
            
        })
    },
    methods: {
        // 通过window的消息通知告知任务结束
        notification(){
            let options;
            console.log(this.hasProcessTime)
            if (this.hasProcessTime == this.curTask.duringTime * 60) {
                options = {
                    // body: `任务真正进行时间：\n${ten(parseInt(this.hasProcessTime/3600))}小时${ten(parseInt(this.hasProcessTime%3600/60))}分${ten(parseInt(this.hasProcessTime%3600%60))}秒`,
                    body: `请休息一下吧，工作辛苦啦！`,
                    icon: require('../../assets/img/icon1.png')
                }
                // window通知
                new Notification(`恭喜，你设置的 ${this.curTask.name} 已完成`, options);
            } else {
                options = {
                   body: `任务尚未成功，期待下次重来`,
                    icon: require('../../assets/img/icon2.png')
                }
                new Notification(`抱歉，您提前结束了工作`, options);
            }
        },
        // init初始化获取数据
        initGetTomato() {
            window.ipcRenderer.send('render-msg', '获取番茄钟')
        },
        //code  编码生成器
        randomString(length) {
            var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
            var result = ''
            for (var i = length; i > 0; --i)
                result += str[Math.floor(Math.random() * str.length)]  
            return result;
        },
        // 开始任务
        taskStart(item) {
            let date = new Date()
            this.taskbeginTime = date.getTime();
            this.taskendTime = new Date(this.taskbeginTime + item.duringTime * 60 * 1000);
            this.taskduringTime = item.duringTime * 60;
            this.hasProcessTime = 0;
            // 打开倒计时弹窗
            this.isRuning = true;
            this.curTask = item;
        },
        // 结束倒计时
        overCountdown() {
            this.taskduringTime = 0;
            this.isRuning = false;
            this.countdownTime = '';  //任务倒计时
            this.taskbeginTime = '';  // 任务开始时间
            this.taskendTime = '';
        },
        // 删除任务
        deleteTask(taskId) {
            this.taskList = this.taskList.filter((item)=>{
                if (item.taskId == taskId) {
                    return false;
                } else {
                    return true;
                }
            })
            // 数据存入json中
            window.ipcRenderer.send('save-msg', this.taskList);
        },
        // 添加新任务
        addNewTask() {
            if (!this.needTaskname) return ;
            if (this.sliderValue == 0) return ;
            this.taskList.push({
                name: this.needTaskname,
                creatTime: this.curTime,
                duringTime: this.sliderValue,
                startFlag: false,
                bgSrc: `bg${ Math.floor(Math.random() * (5 - 1)) + 1 }.png`,
                taskId: this.randomString(20)
            })
            // 数据存入json中
            window.ipcRenderer.send('save-msg', this.taskList);
            this.openaddTask(false);
        },
        // 打开关闭添加弹窗
        openaddTask(flag) {
            if (this.isRuning) return ;
            if (this.absTipFlag == flag) return ;
            if (flag == true) {
                this.sliderValue = 20;
                this.needTaskname = '';
            }
            this.absTipFlag = flag;
        },
        // 获取当前时间
        currentTime() {
            let date = new Date();
            
            this.date = {
                hour: ten(date.getHours()),
                minute: ten(date.getMinutes()),
                second: ten(date.getSeconds()),
                year: date.getFullYear(),
                mounth: date.getMonth() + 1,
                date: ten(date.getDate()),
                day: date.getDay(),
            }
        }
    },
    components: {
        wzc_input,
        wzc_slider
    },
    computed: {
        itemImg() {
            return (src) => {
                return require(`../../assets/img/taskcard/${src}`)
            }
        }
    },
}

</script>
<style  lang='less' scoped>
@import url(../../assets/css/common.less);
@images: "../../assets/img/taskcard/";
@font-face {
    font-family: 'Oswald';
    src: url(../../assets/css/Oswald-VariableFont_wght.ttf);
}

.todayPlan {
    .wandh(100%, calc(100% - 40px));
    position: relative;
    ::-webkit-scrollbar-thumb{ 
        background-color:#999; 
        outline-offset:-2px; 
        outline:0px solid #fff; 
        border-radius:6px; 
        border: 0px solid #fff; 
        height: 50px;
        cursor: pointer;
    }
    ::-webkit-scrollbar{ 
        width:8px; 
        height:8px; 
    }
    
    .cur_day_time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #26A8E6;
        .wandh(100%, 25px);
        .cur_day_time_txt {
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            margin-left: 10px;
            cursor: default;
        }
        .add_work {
            margin-right: 10px;
            .svg-icon {
                .wandh(25px, 25px);
                fill: #fff;
                cursor: pointer;
                &:hover {
                    fill: aqua;
                }
            }
        }
    }
    
    .task_list {
        .wandh(100%, calc(100% - 25px));
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        position: relative;
        .task_card {
            display: flex;
            position: relative;
            color: #fff;
            .wandh(calc(100% - 60px), 80px);
            margin: 15px auto;
            border-radius: 10px;
            background-size: 100% 100% !important;
            .task_card_left {
                .wandh(calc(100% - 160px), 100%);
                margin-left: 30px;
                color: #fff;
                z-index: 100;
                .nameDom {
                    .wandh(100%, 55px);
                    .overhidden();
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 55px;
                    font-family: 'Oswald';
                }
                .duringDom {
                    font-size: 13px;
                    font-weight: bold;
                    line-height: 20px;
                    height: 25px;
                }
            }
            .task_card_right {
                .wandh(130px, 100%);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 100;
                .start {
                    font-size: 23px;
                    letter-spacing: 3px;
                    cursor: pointer;
                    color: #fff;
                    &:hover {
                        text-shadow: rgb(238, 233, 233) 3px 3px 5px;
                    }
                }
                
            }

            .task_card_close {
                position: absolute;
                top: -12px;
                right: -12px;
                .wandh(30px, 30px);
                display: none;
                z-index: 300;
                cursor: pointer;
                .task_card_close_icon {
                    .wandh(100%, 100%);
                    fill: #f00;
                }
            }

            &::before {
                content: '';
                .wandh(100%, 100%);
                position: absolute;
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 10px;
                
            }
            &:hover {
                .task_card_close {
                    display: block;
                }
            }
            &:hover::before {
                background-color: rgba(0, 0, 0, 0.4);
            }
        }

        .occDom {
            position: absolute;
            top: 0;
            left: 0;
            .wandh(100%, 100%);
            .occDom_img {
                .wandh(180px, 160px);
                .backgroundImg('../../assets/img/icon3.png');
                margin: calc(50% - 120px) auto 10px;
            }
            .occDom_txt {
                font-size: 18px;
                text-align: center;
            }
        }
    }

    // 添加待办弹窗
    .absTip {
        position: absolute;
        .wandh(100%, calc(100% - 25px));
        top: 25px;
        left: 0px;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.3);
        .add_need_task {
            .wandh(300px, 260px);
            margin-top: 120px;  
            margin-left: calc(50% - 150px);
            background-color: #fff;
            border-radius: 20px;
            box-shadow: #999 10px 10px 10px;
            overflow: hidden;

            .need_head {
                .wandh(100%, 50px);
                background-color: #46b4e9;
                display: flex;
                .ntitle {
                    color: #fff;
                    font-size: 18px;
                    .wandh(220px, 100%);
                    text-align: center;
                    margin-left: 40px;
                    line-height: 50px;
                }
                .nclose {
                    .svg-icon {
                        .wandh(20px, 20px);
                        fill: #fff;
                        position: relative;
                        top: calc(50% - 10px);
                        cursor: pointer;
                    }
                }
            }

            .need_content {
                .wandh(100%, calc(100% - 50px));
                display: flex;
                flex-direction: column;
                .need_task_name {
                    margin: 20px auto 10px;
                }
                .timeIntro {
                    margin-left: 25px;
                    font-size: 14px;
                    color: #6d717b;
                }
                .need_task_slider {
                    margin: 0 auto;
                }
                .surebtn {
                    .wandh(60px, 30px);
                    margin-top: 15px;
                    align-self: center;
                    font-size: 16px;
                    background-color: #46b4e9;
                    border-radius: 10px;
                    text-align: center;
                    line-height: 30px;
                    color: #fff;
                    cursor: pointer;
                    &:hover {
                        text-shadow: #a9c0cc 5px 5px 5px;
                        box-shadow: #a9c0cc 3px 3px 3px;
                    }
                }
            }
        }

        // 任务倒计时
        .countdown {
            .wandh(250px, 130px);
            margin: calc(50% - 80px) auto 0px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
            color: #fff;
            display: flex;
            flex-direction: column;
            position: relative;
            .countdown_title {
                text-align: center;
                font-size: 20px;
                margin-top: 30px;
                margin-bottom: 10px;
            }
            .countdown_time {
                text-align: center;
                font-size: 17px;
            }

            .countdown_close {
                position: absolute;
                top: -12px;
                right: -12px;
                .wandh(30px, 30px);
                z-index: 300;
                cursor: pointer;
                .task_card_close_icon {
                    .wandh(100%, 100%);
                    fill: #f00;
                }
            }
        }
    }
    
}
</style>